<template>
  <div class="search-header">
    <div class="logo-wrap">
      <img :src="`${$baseImgUrl}logo_e.png`"/>
    </div>
    <div class="search-wrap">
      <div class="btn-wrap">
        <router-link to="/home">首页</router-link>
        <router-link to="/company">公司</router-link>
        <router-link to="/discounts">优惠</router-link>
        <router-link to="/pedia">百科</router-link>
        <router-link to="/qa">问答</router-link>
        <router-link to="/guarantee">担保</router-link>
        <router-link to="/crown">皇冠</router-link>
        <router-link to="/bbs">论坛</router-link>
      </div>
      <div class="search-container">
        <img :src="`${$baseImgUrl}bet_img_07.png`"/>
        <el-input v-model="keyword" placeholder="火博搜索">
          <el-select
            slot="append"
            v-model="selectVal"
            placeholder="请选择"
          >
            <el-option label="公司" value="company"></el-option>
            <el-option label="优惠" value="discounts"></el-option>
            <el-option label="百科" value="pedia"></el-option>
            <el-option label="问答" value="qa"></el-option>
            <el-option label="担保" value="guarantee"></el-option>
            <el-option label="皇冠" value="crown"></el-option>
            <el-option label="论坛" value="bbs"></el-option>
          </el-select>
        </el-input>
        <el-button class="search-btn" icon="el-icon-search" type="primary" @click="search">搜一下</el-button>
        <img :src="`${$baseImgUrl}bet_img_11.png`"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchHeader',
  data() {
    return {
      keyword: '',
      selectVal: ''
    };
  },
  created() {},
  methods: {
    search() {
      console.log(this.keyword);
      console.log(this.selectVal);
      this.$message('暂未开发');
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../less/global';
  .search-header {
    display: flex;
    width: @mainWidth;
    margin: 20px auto 20px;
    padding: 0 80px;
    .logo-wrap {
      display: flex;
      flex: 0 1 162px;
      flex-direction: column;
      justify-content: flex-end;
    }
    .search-wrap {
      flex: 1;
      .btn-wrap {
        display: flex;
        margin: 0 40px 10px 90px;
        a {
          flex: 0 0 66px;
          padding: 8px 0;
          border-radius: 3px;
          text-align: center;
          color: #666;
          cursor: pointer;
          text-decoration: none;
          &:hover,
          &.active {
            background-color: #00a895;
            color: #fff;
          }
        }
      }
      .search-container {
        display: flex;
        img {
          flex: 0 0 27px;
        }
        .el-input {
          margin-right: 10px;
        }
        .el-button {
          background-color: @mainBgColor;
          border: 1px solid @mainBgColor;
          &:hover {
            background-color: @mainBgHoverColor;
            border: 1px solid @mainBgHoverColor;
          }
        }
      }
    }
  }
  .search-container /deep/ .el-select .el-input {
    width: 100px;
  }
</style>
